<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户分析</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.css">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.reset.css">
    <style>
        .main-container {
            padding: 20px;
            box-sizing: border-box;
            overflow: auto;
        }
        .report-container {
            width: 720px;
            margin-bottom: 20px;
            margin-right: 20px;
            display: inline-block;
            float:left;
        }
        .report-content {
            padding: 20px;
            width: 600px;
            height: 400px;
            position: relative
        }
        .custom-content .search-bar {
            box-sizing: border-box;
            padding: 20px;
        }
        .total-report-container {
            width: 100%;
            text-align: center;
            padding:40px 0px;
            border-bottom: 1px solid #e6e6e6;
            margin-bottom: 20px
        }
        .total-report-container .total-report-desc {
            font-size: 16px;
            color: #353535;
        }
        .total-report-container .total-report-value {
            font-size: 42px;
            padding-top: 16px;
            line-height: 1.2;
        }
    </style>
</head>
<body style="display: none;">
    <div id="app" class="container" flex>
        <el-admin-menu :user-detail="userDetail" :menus="menus" @logout="logout">
            <div class="content-container" flex-box=1 flex="dir:top">
                <div flex-box="0" class="tab-menu" flex="cross:center">
                    <div class="title" flex-box=0>用户分析</div>
                </div>
                <div flex-box="1">
                    <div class="main-container">
                        <div class="total-report-container" flex>
                            <div flex-box="1">
                                <div class="total-report-desc">用户总数</div>
                                <div class="total-report-value" v-text="systemUserTotalReportService.userNum||'--'"></div>
                            </div>
                            <div flex-box="1">
                                <div class="total-report-desc">公众号用户数</div>
                                <div class="total-report-value" v-text="systemUserTotalReportService.publicNum||'--'"></div>
                            </div>
                            <div flex-box="1">
                                <div class="total-report-desc">群总数</div>
                                <div class="total-report-value" v-text="systemUserTotalReportService.groupNum||'--'"></div>
                            </div>
                            <div flex-box="1">
                                <div class="total-report-desc">群用户数</div>
                                <div class="total-report-value" v-text="systemUserTotalReportService.groupPeopleNum||'--'"></div>
                            </div>
                            <div flex-box="1">
                                <div class="total-report-desc">小助手数</div>
                                <div class="total-report-value" v-text="systemUserTotalReportService.assistantNum||'--'"></div>
                            </div>
                            <div flex-box="1">
                                <div class="total-report-desc">小助手好友数</div>
                                <div class="total-report-value" v-text="systemUserTotalReportService.assistantPeopleNum||'--'"></div>
                            </div>
                        </div>
                        <!--用户爱好分析-->
                        <div class="report-container">
                            <el-section-pannel title="用户爱好分析" border="all" title-padding="0px 20px">
                                <div slot="operator">
                                    <el-select v-model="userHobbiesReport_blockId" placeholder="请选择">
                                        <el-option
                                                v-for="item in blockList"
                                                :key="item.key"
                                                :label="item.name"
                                                :value="item.key"
                                                change="cityChange">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div slot="content" class="custom-content">
                                    <div>
                                        <div style="height: 440px;width:100%">
                                            <el-table
                                                    :data="userHobbiesReport"
                                                    height="440"
                                                    style="width: 100%">
                                                <el-table-column
                                                        fixed
                                                        prop="labelName"
                                                        label="类别"
                                                        width="250">
                                                </el-table-column>
                                                <el-table-column
                                                        prop="uv"
                                                        label="UV">
                                                </el-table-column>
                                                <el-table-column
                                                        prop="pv"
                                                        label="PV">
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </div>
                                </div>
                            </el-section-pannel>
                        </div>

                        <!--用户关键词-->
                        <div class="report-container">
                            <el-section-pannel :title="worldCloud_title" border="all" title-padding="0px 20px">
                                <div slot="operator">
                                    <el-select v-model="worldCloud_blockId" placeholder="请选择">
                                        <el-option
                                                v-for="item in blockList"
                                                :key="item.key"
                                                :label="item.name"
                                                :value="item.key"
                                                change="cityChange">
                                        </el-option>
                                    </el-select>
                                    <el-button type="primary" icon="el-icon-refresh" @click="userHobbiesworldCloudFetch">刷新</el-button>
                                </div>
                                <!--<div slot="operator">-->
                                    <!--<el-button type="primary" icon="el-icon-refresh" @click="userHobbiesworldCloudFetch">刷新</el-button>-->
                                <!--</div>-->
                                <div slot="content" class="custom-content">
                                    <div class="report-content">
                                        <div id="worldCloud" style="width: 600px;height: 400px;"></div>
                                    </div>
                                </div>
                            </el-section-pannel>
                        </div>

                        <!--12用户来源情况总表-->
                        <div class="report-container">
                            <el-section-pannel title="用户来源情况总表" border="all" title-padding="0px 20px">
                                <div slot="content" class="custom-content">
                                    <div class="report-content">
                                        <v-chart ref="channelUserComeFromReportService"
                                                 :options="channelUserComeFromReportService"/>
                                    </div>
                                </div>
                            </el-section-pannel>
                        </div>
                        <!--13儿用户来源情况总表-->
                        <div class="report-container">
                            <el-section-pannel title="儿用户来源情况总表" border="all" title-padding="0px 20px">
                                <div slot="content" class="custom-content">
                                    <div class="report-content">
                                        <v-chart ref="babyUserComeFromTotalReportService"
                                                 :options="babyUserComeFromTotalReportService"/>
                                    </div>
                                </div>
                            </el-section-pannel>
                        </div>
                        <!-- 公众号月增量用户表 -->
                        <div class="report-container">
                            <el-section-pannel title="公众号月增量用户表" border="all" title-padding="0px 20px">
                                <div slot="content" class="custom-content">
                                    <div class="search-bar">
                                        <el-select v-model="publicUserMonthAddReportService_cityId" placeholder="选择城市">
                                            <el-option
                                                    v-for="item in runningAreaList"
                                                    :key="item.cityAreaId"
                                                    :label="item.cityAreaName"
                                                    :value="item.cityAreaId">
                                            </el-option>
                                        </el-select>
                                        <el-date-picker
                                                v-model="publicUserMonthAddReportService_monthStart"
                                                type="month"
                                                format="yyyy-MM"
                                                value-format="yyyyMM"
                                                placeholder="起始月份">
                                        </el-date-picker>
                                        <el-date-picker
                                                v-model="publicUserMonthAddReportService_monthEnd"
                                                type="month"
                                                format="yyyy-MM"
                                                value-format="yyyyMM"
                                                placeholder="截止月份">
                                        </el-date-picker>
                                    </div>
                                    <div class="report-content">
                                        <v-chart ref="publicUserMonthAddReportService"
                                                 :options="publicUserMonthAddReportService"/>
                                    </div>
                                </div>
                            </el-section-pannel>
                        </div>
                        <!--社群月增量用户表-->
                        <div class="report-container">
                            <el-section-pannel title="社群月增量用户表" border="all" title-padding="0px 20px">
                                <div slot="content" class="custom-content">
                                    <div class="search-bar">
                                        <el-select v-model="wechatUserMonthAddReportService_cityId" placeholder="选择城市">
                                            <el-option
                                                    v-for="item in runningAreaList"
                                                    :key="item.cityAreaId"
                                                    :label="item.cityAreaName"
                                                    :value="item.cityAreaId">
                                            </el-option>
                                        </el-select>
                                        <el-date-picker
                                                v-model="wechatUserMonthAddReportService_monthStart"
                                                type="month"
                                                format="yyyy-MM"
                                                value-format="yyyyMM"
                                                placeholder="起始月份">
                                        </el-date-picker>
                                        <el-date-picker
                                                v-model="wechatUserMonthAddReportService_monthEnd"
                                                type="month"
                                                format="yyyy-MM"
                                                value-format="yyyyMM"
                                                placeholder="截止月份">
                                        </el-date-picker>
                                    </div>
                                    <div class="report-content">
                                        <v-chart ref="wechatUserMonthAddReportService"
                                                 :options="wechatUserMonthAddReportService"/>
                                    </div>
                                </div>
                            </el-section-pannel>
                        </div>
                        <!--14孕用户来源情况总表-->
                        <div class="report-container">
                            <el-section-pannel title="孕用户来源情况总表" border="all" title-padding="0px 20px">
                                <div slot="content" class="custom-content">
                                    <div class="report-content">
                                        <v-chart ref="preUserComeFromTotalReportService"
                                                 :options="preUserComeFromTotalReportService"/>
                                    </div>
                                </div>
                            </el-section-pannel>
                        </div>
                        <!--小助手情况总表-->
                        <div class="report-container">
                            <el-section-pannel title="小助手情况总表" border="all" title-padding="0px 20px">
                                <div slot="operator">
                                    <el-input v-model="assistantListTotalReportService_assistantName" placeholder="搜索小助手"></el-input>
                                </div>
                                <div slot="content" class="custom-content">
                                    <div>
                                        <div style="height: 440px;width:100%">
                                            <el-table
                                                    :data="assistantListTotalReportService"
                                                    height="440"
                                                    style="width: 100%">
                                                <el-table-column
                                                        fixed
                                                        prop="wechatName"
                                                        label="小助手名">
                                                </el-table-column>
                                                <el-table-column
                                                        width="200"
                                                        prop="peopleNum"
                                                        label="好友数">
                                                </el-table-column>
                                                <el-table-column
                                                        width="200"
                                                        prop="groupNum"
                                                        label="加群数">
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </div>
                                </div>
                            </el-section-pannel>
                        </div>

                        <!--分城市公众号用户分布总表-->
                        <div class="report-container">
                            <el-section-pannel title="分城市公众号用户分布总表" border="all" title-padding="0px 20px">
                                <div slot="content" class="custom-content">
                                    <div class="report-content">
                                        <v-chart ref="cityPublicWechatTotalReport" :options="cityPublicWechatTotalReport" />
                                    </div>
                                    <el-table
                                            :data="cityPublicWechatTotalReport_list"
                                            stripe
                                            height="400"
                                            style="width: 100%">
                                        <el-table-column
                                                prop="city"
                                                label="城市"
                                                width="180">
                                        </el-table-column>
                                        <el-table-column
                                                prop="peopleNum"
                                                label="用户数">
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-section-pannel>
                        </div>
                        <!--分城市社群用户分布总表-->
                        <div class="report-container">
                            <el-section-pannel title="分城市社群用户分布总表" border="all" title-padding="0px 20px">
                                <div slot="content" class="custom-content">
                                    <div class="report-content">
                                        <v-chart ref="cityWechatTotalReport" :options="cityWechatTotalReport" />
                                    </div>
                                    <el-table
                                            :data="cityWechatTotalReport_list"
                                            stripe
                                            height="400"
                                            style="width: 100%">
                                        <el-table-column
                                                prop="city"
                                                label="城市"
                                                width="180">
                                        </el-table-column>
                                        <el-table-column
                                                prop="peopleNum"
                                                label="用户数">
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-section-pannel>
                        </div>
                        <!--分城市月龄分布总表-->
                        <div class="report-container">
                            <el-section-pannel title="分城市月龄分布总表" border="all" title-padding="0px 20px">
                                <div slot="operator">
                                    <el-select v-model="cityAgeTotalReport_cityAreaId" placeholder="请选择">
                                        <el-option
                                                v-for="item in runningAreaList_cityAge"
                                                :key="item.cityAreaId"
                                                :label="item.cityAreaName"
                                                :value="item.cityAreaId"
                                                change="cityChange">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div slot="content" class="custom-content">
                                    <div class="report-content">
                                        <v-chart ref="cityAgeTotalReport" :options="cityAgeTotalReport" />
                                    </div>
                                </div>
                            </el-section-pannel>
                        </div>

                        <!--分城市月新增付费用户表-->
                        <div class="report-container">
                            <el-section-pannel title="分城市月新增付费用户表" border="all" title-padding="0px 20px">
                                <div slot="content" class="custom-content">
                                    <div class="search-bar">
                                        <el-select v-model="payUserIncrementCountByCityMonth_cityId" placeholder="选择城市">
                                            <el-option
                                                    v-for="item in runningAreaList"
                                                    :key="item.cityAreaId"
                                                    :label="item.cityAreaName"
                                                    :value="item.cityAreaId">
                                            </el-option>
                                        </el-select>
                                        <el-date-picker
                                                v-model="payUserIncrementCountByCityMonth_monthStart"
                                                type="month"
                                                format="yyyy-MM"
                                                value-format="yyyyMM"
                                                placeholder="起始月份">
                                        </el-date-picker>
                                        <el-date-picker
                                                v-model="payUserIncrementCountByCityMonth_monthEnd"
                                                type="month"
                                                format="yyyy-MM"
                                                value-format="yyyyMM"
                                                placeholder="截止月份">
                                        </el-date-picker>
                                    </div>
                                    <div class="report-content">
                                        <v-chart ref="payUserIncrementCountByCityMonth" :options="payUserIncrementCountByCityMonth"/>
                                    </div>
                                </div>
                            </el-section-pannel>
                        </div>
                    </div>
                </div>
            </div>
        </el-admin-menu>
    </div>
    <script src="common/config.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script>
      window.jQuery || document.write('<script src="//cdn.staticfile.org/jquery/3.1.1/jquery.min.js"><\/script>')

      /**
       * 得到请求链接
       * @param prefix
       * @param path
       */
      function makePath (prefix, path) {
        var reg = new RegExp(/((\.\w+){2}$)/)
        reg.test(window.location.hostname)
        if (path.indexOf('/') !== 0) {
          path = '/' + path
        }
        return window.location.protocol + '//' + prefix + RegExp.$1 + path
      }

      /**
       * 生成折线图的options对象
       * @param title
       */
      function makeOptions (title, options) {
        options.title = {
          text: title
        }
        options.backgroundColor = 'rgb(255,255,255)'
        options.tooltip = {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        }
        options.toolbox = {
          feature: {
            saveAsImage: {
              title:' '
            }
          }
        }
        options.grid = {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        }
        return options
      }


      /**
       * 初始化options对象
       * 后面有写相同属性就把这里的覆盖
       */
      function extendOptions (options) {
        var init_options = {
          backgroundColor: 'rgb(255,255,255)',
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          toolbox:{
            feature: {
              saveAsImage: {
                title:' '
              }
            }
          }
        }
        $.extend(init_options, options);
        return init_options;
      }

    </script>
    <script src="testdata/test_data.js"></script>
    <script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.js"></script>
    <script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.common.js"></script>
    <script src="//cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
    <!-- <script src="./lib/echarts.min.js"></script> -->
    <script src="//cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>
    <!--<script src="echarts-wordcloud.min.js"></script>-->
    <script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/echarts-wordcloud.js"></script>

    <script>
        var systemUserTotalReportServiceMixins = {
          data:function(){
            return {
              systemUserTotalReportService:{}
            }
          },
          methods:{
            systemUserTotalReportServiceFetch:function(){
              var that = this;
              $.base.sendHttpRequest(makePath('report', '/systemUserTotalReportService'), {blockId:that.userHobbiesReport_blockId},function(resp){
                that.systemUserTotalReportService = resp.data;
              },function(complete){},function(error){} )
            }
          },
          mounted:function(){
            this.systemUserTotalReportServiceFetch();
          }
        }
    </script>
    <!--分城市公众号用户分布总表-->
    <script>
      var cityPublicWechatTotalReportMixins = {
        data:function(){
          return {
            cityPublicWechatTotalReport: null,
            cityPublicWechatTotalReport_list: null
          }
        },
        methods:{
          //分城市公众号用户分布总表
          cityPublicWechatTotalReportFetch:function(){
            var that = this;
            $.base.sendHttpRequest(makePath('report','/cityPublicWechatTotalReportService'), {},
              function(resp){
                console.log(JSON.stringify(resp));
                if(resp.data.reportList){
                  var list = resp.data.reportList||[];
                  that.cityPublicWechatTotalReport_list = list;
                  that.cityPublicWechatTotalReport = extendOptions(
                    {
                      title: {
                        text: '分城市公众号用户分布总表'
                      },
                      color: ['#FB7171'],
                      xAxis : [
                        {
                          type : 'category',
                          data : list.map(function (item) {
                            return item.city
                          }),
                          axisTick: {
                            alignWithLabel: true
                          }
                        }
                      ],
                      yAxis : {
                        type : 'value'
                      },
                      series : [
                        {
                          label: {
                            normal: {
                              show: true,
                              position: 'top'
                            }
                          },
                          name:'用户数',
                          type:'bar',
                          barWidth: '60%',
                          data:list.map(function (item) {
                            return item.peopleNum
                          })
                        }
                      ]
                    }
                  )
                }
              }, function(complete){}, function(error){})
          },
        },
        mounted(){
          this.cityPublicWechatTotalReportFetch();
        },
        watch:{
        }
      }
    </script>

    <!--用户爱好分析-->
    <script>
      var userHobbiesReportMixins = {
        data:function(){
          return {
            userHobbiesReport: [],
            userHobbiesReport_blockId: 99
          }
        },
        methods:{
          userHobbiesReportFetch:function(){
            var that = this
            $.base.sendHttpRequest(makePath('report', '/userHobbiesReport'), {blockId:that.userHobbiesReport_blockId},function(resp){
              that.userHobbiesReport = resp.data.reportList||[];
            },function(complete){},function(error){} )
          }
        },
        mounted:function(){
          this.userHobbiesReportFetch()
        },
        watch:{
          userHobbiesReport_blockId: function(val){
            this.userHobbiesReportFetch();
          }
        }
      }
    </script>

    <!--用户关键词-->
    <script>
      var worldCloudMixins = {
        data:function(){
          return {
            worldCloud_blockId: 99,
            worldCloud_title: '专家问答-词云图'
          }
        },
        methods:{
          userHobbiesworldCloudFetch:function(){
            var that = this
            $.base.sendHttpRequest(makePath('report', '/userHobbiesReport'), {blockId:that.worldCloud_blockId},function(resp){
              var list = resp.data.reportList||[];
              that.worldCloudhandl(list);
            },function(complete){},function(error){} )
          },
          worldCloudhandl(list){
            var that = this;
            if(list&&list.length>0){
              var chart = echarts.init(document.getElementById('worldCloud'));
              chart.setOption(
                {
                  title: {
                    text: that.worldCloud_title,
                  },
                  tooltip: {
                    show: true
                  },
                  toolbox:{
                    feature: {
                      saveAsImage: {
                        title:' '
                      }
                    }
                  },
                  series: [{
                    type: 'wordCloud',
                    size: ['80%', '80%'],
                    // textRotation : [0, 45, 90, -45],
                    textPadding: 0,
                    autoSize: {
                      enable: true,
                      minSize: 14
                    },
                    textStyle: {
                      normal: {
                        fontFamily: 'sans-serif',
                        fontWeight: 'bold',
                        // Color can be a callback function or a color string
                        color: function () {
                          // Random color
                          return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                          ].join(',') + ')';
                        }
                      },
                      emphasis: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                      }
                    },
                    data: list.map(function (item) {
                      var obj = {};
                      obj.name = item.labelName;
                      obj.value = item.pv;
                      return obj
                    })
                  }]
                }
              )
            }
          },

        },
        mounted:function(){
          this.userHobbiesworldCloudFetch();
        },
        watch:{
          worldCloud_blockId:function () {
            var that = this;
            //拼一下title
            var title = '-词云图';
            that.blockList.map(function (item) {
              if(that.worldCloud_blockId == item.key){
                title = item.name + title;
              }
            })
            that.worldCloud_title = title;
            that.userHobbiesworldCloudFetch();
          }
        }
      }
    </script>

    <!-- 12用户来源情况总表 -->
    <script>
      var channelUserComeFromReportServiceMixins = {
        data: function () {
          return {
            channelUserComeFromReportService:null
          }
        },
        methods: {
          channelUserComeFromReportServiceFetch: function () {
            var that = this
            that.$refs.channelUserComeFromReportService.showLoading()
            $.base.sendHttpRequest(makePath('report', '/channelUserComeFromReportService'), {},
              function (resp) {
                var list = resp.data.onlineList||[]
                var monthArr = list.map(function (item) {return item.month})
                var onArr = (resp.data.onlineList || []).map(function (item) {return item.count})
                var offArr = (resp.data.offlineList || []).map(function (item) {return item.count})
                that.channelUserComeFromReportService = makeOptions('用户来源情况总表',{
                  legend: {
                    data:['线上','线下']
                  },
                  xAxis : [{
                      type : 'category',
                      boundaryGap : false,
                      data : monthArr
                    }],
                  yAxis : [{
                      type : 'value'
                    }],
                  series : [{
                      name:'线上',
                      type:'line',
                      areaStyle: {},
                      data:onArr
                    },
                    {
                      name:'线下',
                      type: 'line',
                      areaStyle: {},
                      data:offArr
                    }]
                })
                that.$refs.channelUserComeFromReportService.hideLoading()
              },
              function (complete) {},
              function (error) {}
            )
          }
        },
        mounted:function() {
          this.channelUserComeFromReportServiceFetch()
        }
      }
    </script>
    <!-- 13儿用户来源情况总表 -->
    <script>
      var babyUserComeFromTotalReportServiceMixins = {
        data:function(){
          return {
            babyUserComeFromTotalReportService:null
          }
        },
        methods:{
          babyUserComeFromTotalReportServiceFetch:function(){
            var that = this
            that.$refs.babyUserComeFromTotalReportService.showLoading()
            $.base.sendHttpRequest(makePath('report', '/babyUserComeFromTotalReportService'), {},
              function (resp) {
                var data = resp.data
                that.babyUserComeFromTotalReportService = makeOptions('儿用户来源情况总表', {
                  legend: {
                    data: ['线上', '线下']
                  },
                  xAxis: [
                    {
                      type: 'category',
                      boundaryGap: false,
                      data: (data.onlineList || []).map(function (item) {return item.month})
                    }
                  ],
                  yAxis: [
                    {
                      type: 'value'
                    }
                  ],
                  series:[
                    {
                      name:'线上',
                      type:'line',
                      areaStyle:{},
                      data:(data.onlineList || []).map(function (item) {return item.count})
                    },
                    {
                      name:'线下',
                      type:'line',
                      areaStyle:{},
                      data:(data.offlineList || []).map(function (item) {return item.count})
                    }
                  ]
                })
                that.$refs.babyUserComeFromTotalReportService.hideLoading()
              },
              function (complete) {},
              function (error) {}
            )
          }
        },
        mounted:function(){
          this.babyUserComeFromTotalReportServiceFetch();
        }
      }
    </script>
    <!-- 14孕用户来源情况总表 -->
    <script>
      var preUserComeFromTotalReportServiceMixins = {
        data:function(){
          return {
            preUserComeFromTotalReportService:null
          }
        },
        methods:{
          preUserComeFromTotalReportServiceFetch:function(){
            var that = this
            that.$refs.preUserComeFromTotalReportService.showLoading()
            $.base.sendHttpRequest(makePath('report', '/preUserComeFromTotalReportService'), {},
              function (resp) {
                var data = resp.data
                that.preUserComeFromTotalReportService = makeOptions('孕用户来源情况总表', {
                  legend: {
                    data: ['线上', '线下']
                  },
                  xAxis: [
                    {
                      type: 'category',
                      boundaryGap: false,
                      data: (data.onlineList || []).map(function (item) {return item.month})
                    }
                  ],
                  yAxis: [
                    {
                      type: 'value'
                    }
                  ],
                  series:[
                    {
                      name:'线上',
                      type:'line',
                      areaStyle:{},
                      data:(data.onlineList || []).map(function (item) {return item.count})
                    },
                    {
                      name:'线下',
                      type:'line',
                      areaStyle:{},
                      data:(data.offlineList || []).map(function (item) {return item.count})
                    }
                  ]
                })
                that.$refs.preUserComeFromTotalReportService.hideLoading()
              },
              function (complete) {},
              function (error) {}
            )
          }
        },
        mounted:function(){
          this.preUserComeFromTotalReportServiceFetch();
        }
      }
    </script>
    <!-- 公众号月增量用户表 -->
    <script>
      var publicUserMonthAddReportServiceMixins = {
        data:function(){
          return {
            publicUserMonthAddReportService:null,
            publicUserMonthAddReportService_cityId:'',
            publicUserMonthAddReportService_monthStart:'',
            publicUserMonthAddReportService_monthEnd:''
          }
        },
        methods:{
          publicUserMonthAddReportServiceFetch:function(){
            var that = this
            that.$refs.publicUserMonthAddReportService.showLoading()
            $.base.sendHttpRequest(makePath('report', '/publicUserMonthAddReportService'), {
                cityId:that.publicUserMonthAddReportService_cityId,
                monthStart: that.publicUserMonthAddReportService_monthStart,
                monthEnd: that.publicUserMonthAddReportService_monthEnd
              },
              function (resp){
                var list = resp.data.reportList||[]
                that.publicUserMonthAddReportService = makeOptions("公众号月增量用户表",{
                  xAxis: [
                    {
                      type: 'category',
                      boundaryGap: false,
                      data: list.map(function (item) {return item.month})
                    }
                  ],
                  yAxis: [
                    {
                      type: 'value'
                    }
                  ],
                  series:[
                    {
                      type:'line',
                      stack:'',
                      areaStyle:{},
                      data:list.map(function (item) {return item.peopleNum})
                    }
                  ]
                })
                that.$refs.publicUserMonthAddReportService.hideLoading()
              },
              function (complete) {},
              function (error) {}
            )
          }
        },
        mounted:function(){
          this.publicUserMonthAddReportServiceFetch()
        },
        watch:{
          publicUserMonthAddReportService_cityId:function(val){
            this.publicUserMonthAddReportServiceFetch()
          },
          publicUserMonthAddReportService_monthStart:function(val){
            this.publicUserMonthAddReportServiceFetch()
          },
          publicUserMonthAddReportService_monthEnd:function(val){
            this.publicUserMonthAddReportServiceFetch()
          }
        }
      }
    </script>
    <!-- 小助手情况总表 -->
    <script>
      var assistantListTotalReportServiceMixins = {
        data:function(){
          return {
            assistantListTotalReportService:[],
            assistantListTotalReportService_assistantName:''
          }
        },
        methods:{
          assistantListTotalReportServiceFetch:function(){
            var that = this;
            $.base.sendHttpRequest(makePath('report', '/assistantListTotalReportService'), {
              assistantName:that.assistantListTotalReportService_assistantName
            },function(resp){
              that.assistantListTotalReportService = resp.data.reportList||[];
            },function(complete){},function(error){} )
          }
        },
        mounted:function(){
          this.assistantListTotalReportServiceFetch();
        },
        watch:{
          assistantListTotalReportService_assistantName:function(){
            this.assistantListTotalReportServiceFetch()
          }
        }
      }
    </script>
    <!-- 社群月增量用户表 -->
    <script>
      var wechatUserMonthAddReportServiceMixins = {
        data:function(){
          return {
            wechatUserMonthAddReportService:null,
            wechatUserMonthAddReportService_cityId:'',
            wechatUserMonthAddReportService_monthStart:'',
            wechatUserMonthAddReportService_monthEnd:''
          }
        },
        methods:{
          wechatUserMonthAddReportServiceFetch:function(){
            var that = this
            that.$refs.wechatUserMonthAddReportService.showLoading()
            $.base.sendHttpRequest(makePath('report', '/wechatUserMonthAddReportService'), {
                cityId:that.wechatUserMonthAddReportService_cityId,
                monthStart: that.wechatUserMonthAddReportService_monthStart,
                monthEnd: that.wechatUserMonthAddReportService_monthEnd
              },
              function (resp){
                var list = resp.data.reportList||[]
                that.wechatUserMonthAddReportService = makeOptions("社群月增量用户表",{
                  xAxis: [
                    {
                      type: 'category',
                      boundaryGap: false,
                      data: list.map(function (item) {return item.month})
                    }
                  ],
                  yAxis: [
                    {
                      type: 'value'
                    }
                  ],
                  series:[
                    {
                      type:'line',
                      stack:'',
                      areaStyle:{},
                      data:list.map(function (item) {return item.peopleNum})
                    }
                  ]
                })
                that.$refs.wechatUserMonthAddReportService.hideLoading()
              },
              function (complete) {},
              function (error) {}
            )
          }
        },
        mounted:function(){
          this.wechatUserMonthAddReportServiceFetch()
        },
        watch:{
          wechatUserMonthAddReportService_cityId:function(val){
            this.wechatUserMonthAddReportServiceFetch()
          },
          wechatUserMonthAddReportService_monthStart:function(val){
            this.wechatUserMonthAddReportServiceFetch()
          },
          wechatUserMonthAddReportService_monthEnd:function(val){
            this.wechatUserMonthAddReportServiceFetch()
          }
        }
      }
    </script>

    <!--分城市月龄分布总表-->
    <script>
      var cityAgeTotalReportMixins = {
        data:function(){
          return {
            cityAgeTotalReport: null,
            cityAgeTotalReport_cityAreaId: null
          }
        },
        methods:{
          //
          lineFlag:function(list,flag){
            var arr = list.map(function (item) {
              if(item.dataList[0].lineFlag==flag){
                return item.dataList[0].peopleNum || 0;
              }else{
                if(item.dataList[1]){
                  return item.dataList[1].peopleNum || 0;
                }else{
                  return 0;
                }
              }
            })
            return arr;
          },
          //分城市月龄分布总表
          cityAgeTotalReportFetch:function(){
            var that = this;
            $.base.sendHttpRequest(makePath('report','/cityAgeTotalReportService'), {cityId: that.cityAgeTotalReport_cityAreaId},
              function(resp){
                console.log(JSON.stringify(resp));
                if(resp.data.reportList){
                  var list = resp.data.reportList||[];
                  that.cityAgeTotalReport = extendOptions(
                    {
                      title: {
                        text: '分城市月龄分布总表',
                      },
                      legend: {
                        data: ['线上', '线下']
                      },
                      grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                      },
                      xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                      },
                      yAxis: {
                        type: 'category',
                        data: list.map(function (item) {
                          return item.age
                        }),
                      },
                      series: [
                        {
                          name: '线上',
                          type: 'bar',
                          label: {
                            normal: {
                              show: true,
                              position: 'right'
                            }
                          },
                          data: that.lineFlag(list,1)
                        },
                        {
                          name: '线下',
                          type: 'bar',
                          label: {
                            normal: {
                              show: true,
                              position: 'right'
                            }
                          },
                          data: that.lineFlag(list,2)
                        }
                      ]
                    }
                  )
                }
              }, function(complete){}, function(error){})
          },
        },
        mounted:function(){
          this.cityAgeTotalReportFetch();
        },
        watch:{
          cityAgeTotalReport_cityAreaId:function(val){
            this.cityAgeTotalReportFetch();
          }
        },
        computed: {
          runningAreaList_cityAge:function() {
            var list = this.runningAreaList;
            var obj = {
              cityAreaName:'其他',
                cityAreaId: 0
            }
            list.push(obj);
            return list
          }
        }
      }
    </script>

    <!--分城市社群用户分布总表-->
    <script>
      var cityWechatTotalReportMixins = {
        data:function(){
          return {
            cityWechatTotalReport: null,
            cityWechatTotalReport_list: null
          }
        },
        methods:{
          //分城市社群用户分布总表
          cityWechatTotalReportFetch:function(){
            var that = this;
            $.base.sendHttpRequest(makePath('report','/cityWechatTotalReportService'), {},
              function(resp){
                console.log(JSON.stringify(resp));
                if(resp.data.reportList){
                  var list = resp.data.reportList||[];
                  that.cityWechatTotalReport_list = list;
                  that.cityWechatTotalReport = extendOptions(
                    {
                      title: {
                        text: '分城市社群用户分布总表'
                      },
                      color: ['#FB7171'],
                      xAxis : [
                        {
                          type : 'category',
                          data : list.map(function (item) {
                            return item.city
                          }),
                          axisTick: {
                            alignWithLabel: true
                          }
                        }
                      ],
                      yAxis : {
                        type : 'value'
                      },
                      series : [
                        {
                          label: {
                            normal: {
                              show: true,
                              position: 'top'
                            }
                          },
                          name:'用户数',
                          type:'bar',
                          barWidth: '60%',
                          data:list.map(function (item) {
                            return item.peopleNum
                          })
                        }
                      ]
                    }
                  )
                }
              }, function(complete){}, function(error){})
          },
        },
        mounted:function(){
          this.cityWechatTotalReportFetch();
        },
        watch:{
        }
      }
    </script>

    <!-- 分城市月新增付费用户表 -->
    <script>
      var payUserIncrementCountByCityMonthMixins = {
        data: function () {
          return {
            payUserIncrementCountByCityMonth_monthStart: '201901',
            payUserIncrementCountByCityMonth_monthEnd: '201905',
            payUserIncrementCountByCityMonth_cityId: null,
            payUserIncrementCountByCityMonth: {}
          }
        },
        methods: {
          payUserIncrementCountByCityMonthFetch: function () {
            var that = this
            this.$refs.payUserIncrementCountByCityMonth.showLoading()
            $.base.sendHttpRequest(makePath('report', '/payUserIncrementCountByCityMonth'), {
                monthStart: that.payUserIncrementCountByCityMonth_monthStart,
                monthEnd:that.payUserIncrementCountByCityMonth_monthEnd,
                cityId:that.payUserIncrementCountByCityMonth_cityId
              },
              function (resp) {
                var list = resp.data.reportList || []
                var monthArr = list && list.length ? (list[0].list||[]).map(function(el){ return el.month }):[]
                var legendArr = list.map(function(el){ return el.cityName })
                var seriesArr = list.map(function(el){
                  return {
                    name:el.cityName,
                    type:'line',
                    areaStyle: {},
                    data:(el.list||[]).map(function(obj){ return obj.userIncrementCount })
                  }
                })
                that.payUserIncrementCountByCityMonth = makeOptions('分城市月新增付费用户表', {
                  legend: {
                    data:legendArr,
                    top:30
                  },
                  xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: monthArr
                  },
                  yAxis: {
                    type: 'value'
                  },
                  series: seriesArr
                })

                that.$refs.payUserIncrementCountByCityMonth.hideLoading()
              }, function (complete) {}, function (error) {})
          }
        },
        mounted:function() {
          this.payUserIncrementCountByCityMonthFetch()
        },
        watch: {
          payUserIncrementCountByCityMonth_monthStart:function(val) {
            this.payUserIncrementCountByCityMonthFetch()
          },
          payUserIncrementCountByCityMonth_monthEnd:function(val){
            this.payUserIncrementCountByCityMonthFetch()
          },
          payUserIncrementCountByCityMonth_cityId:function(val){
            this.payUserIncrementCountByCityMonthFetch()
          }
        }
      }
    </script>

    <script>
      Vue.component('v-chart', VueECharts)
      new Vue({
        el: '#app',
        mixins: [
          $.base.globalMixin,
          userHobbiesReportMixins,
          channelUserComeFromReportServiceMixins,
          babyUserComeFromTotalReportServiceMixins,
          preUserComeFromTotalReportServiceMixins,
          publicUserMonthAddReportServiceMixins,
          assistantListTotalReportServiceMixins,
          wechatUserMonthAddReportServiceMixins,
          cityPublicWechatTotalReportMixins,
          cityAgeTotalReportMixins,
          cityWechatTotalReportMixins,
          worldCloudMixins,
          systemUserTotalReportServiceMixins,
          payUserIncrementCountByCityMonthMixins
        ],
        data: function () {
          return {
            username: '',
            enterDate: '',
            visible: false,
            // 来自test_data.js
            menus: [],
            // 来自test_data.js
            userDetail: {},
            initOptions: {},
            runningAreaList:[],
            blockList:[
              {
                name:'专家问答',
                key:99
              },
              {
                name:'活动预约',
                key:1
              },
              {
                name:'专家课堂',
                key:2
              },
              {
                name:'实物商品',
                key:3
              },
              {
                name:'科普文章',
                key:4
              },
              {
                name:'悦儿早报',
                key:5
              },
              {
                name:'专家预约',
                key:6
              },
              {
                name:'悦儿医生',
                key:7
              },
              {
                name:'福利活动',
                key:9
              },
              {
                name:'月子中心',
                key:13
              },
            ],
          }
        },
        created(){
          this.getRunningAreaFetch()
        },
        methods: {
          getRunningAreaFetch:function(){
            var that = this;
            $.base.sendHttpRequest(makePath('basic','/getRunningArea'), {},
              function(resp){
                var list = resp.data.runningAreaList;
                list.unshift(
                  {
                    cityAreaName:'全部',
                    cityAreaId:null
                  }
                )
                that.runningAreaList = list;
              },
              function(complete){},
              function(error){}
            )
          },
          logout:function() {
            window.location.href = 'login.html'
          }
        },
        mounted:function() {
          document.querySelector('body').style.display = 'block'
        }
      })
    </script>
</body>
</html>